<template>
  <KView class="sys-dialog__wrapper" :style="{'display':isShow?'block':'none'}">
    <template v-if="(destroyOnClose&&isShow)||!destroyOnClose">
      <KView class="sys-dialog-mask" v-if="modal"></KView>
      <KView class="sys-dialog" :class="[animationClassName,{'sys-dialog__centre':isCentre}]" @click="maskClick">
        <KView class="sys-dialog__content" :style="dialogStyle" @click.stop>
          <slot :is-show="isShow"></slot>
        </KView>
      </KView>
    </template>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      left: [Number, String],
      right: [Number, String],
      top: [Number, String],
      bottom: [Number, String],
      width: [Number, String],
      height: [Number, String],
      fullscreen: {
        type: Boolean,
        default: false
      },
      animationName: String,
      duration: Number,
      isCenter: {
        type: Boolean,
        default: false
      },
      isMiddle: {
        type: Boolean,
        default: false
      },
      isCentre: {
        type: Boolean,
        default: false
      },
      modal: {
        type: Boolean,
        default: true
      },
      destroyOnClose: {
        type: Boolean,
        default: true
      },
      closeOnClickModal: {
        type: Boolean,
        default: true
      }
    },

    watch: {
      visible(val) {
        if (val) {
          this.toShowDialog();
        } else {
          this.toHideDialog();
        }
      }
    },

    computed: {
      dialogStyle() {
        if (this.fullscreen) {
          return {
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
          };
        }

        let fields = ['left', 'right', 'top', 'bottom', 'width', 'height'];
        let styleObj = {};
        for (let i = 0; i < fields.length; i++) {
          const field = fields[i];
          let value = this[field];
          if (SystemUtil.isEmpty(value)) {
            continue;
          }
          if (typeof value === 'number') {
            value = SystemUtil.formatPx(value);
          }
          styleObj[field] = value;
        }

        if (this.isCentre) {
          return styleObj;
        }

        if (this.isCenter) {
          let width = this.width;
          width = SystemUtil.ceilValue(width / 2);
          styleObj.left = `calc(50% - ${SystemUtil.formatPx(width)})`;
        }

        if (this.isMiddle) {
          let height = this.height;
          height = SystemUtil.ceilValue(height / 2);
          styleObj.top = `calc(50% - ${SystemUtil.formatPx(height)})`;
        }
        return styleObj;
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        animationClassName: '',
        isShow: this.visible,
        hideTime: 0
      };
    },

    methods: {
      toShowDialog() {
        let animationName = this.animationName;
        if (animationName === 'bottom') {
          this.animationClassName = 'animation-bottom__slideUp';
          this.hideTime = 795;
        } else {
          this.hideTime = 0;
        }
        this.isShow = true;
        this.$emit('open');

        let duration = this.duration;
        if (duration !== undefined) {
          setTimeout(() => {
            this.$emit('update:visible', false);
          }, duration);
        }
      },

      toHideDialog() {
        let animationName = this.animationName;
        if (animationName === 'bottom') {
          this.animationClassName = 'animation-bottom__slideDown';
        }
        this.$emit('close');
        setTimeout(() => {
          this.isShow = false;
          this.$emit('closed');
        }, this.hideTime);
      },

      closeDialog() {
        this.$emit('update:visible', false);
      },

      maskClick() {
        if (this.closeOnClickModal) {
          this.closeDialog();
        }
      }
    }
  };

</script>

<style lang="scss">
  .sys-dialog__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;

    .sys-dialog-mask {
      position: absolute;
      background: #000000;
      opacity: 0.5;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 99;
    }

    .sys-dialog {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 100;

      .sys-dialog__content {
        position: absolute;
      }

      &.sys-dialog__centre {
        display: flex;
        justify-content: center;
        align-items: center;

        .sys-dialog__content {
          position: static;
        }
      }
    }

    .animation-bottom__slideUp {
      animation: bottom-slideUp .8s ease;
    }

    .animation-bottom__slideDown {
      animation: bottom-slideDown .8s ease;
    }
  }

</style>
